<template>
  <div class="tableBox">
    <div class="table">
      <el-table
        :header-cell-style="headerStyle['header-cell-style']"
        :data="column"
        :border="headerStyle.border"
        style="width: 100%"
        :height="headerStyle.height"
      >
        <!-- 是否需要多选框 -->
        <el-table-column v-if="ischeck" type="selection" width="50">
        </el-table-column>

        <!-- 是否需要索引列 -->
        <el-table-column v-if="isIndex" label="序号" type="index" width="50">
        </el-table-column>

        <el-table-column
          v-for="(item, index) in columntag"
          :key="index"
          :label="item.label"
          :prop="item.prop"
          :column-key="item.label"
          :fixed="columnStyle.fixed"
          :width="item.width"
          :header-align="columnStyle.headerAlign"
          :align="columnStyle.align"
          :show-overflow-tooltip="columnStyle.showOverflowTooltip"
        >
          <template slot-scope="scope">
            <slot :name="item.label" :data="scope.row">{{
              scope.row[item.prop]
            }}</slot>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block" v-if="isPagination">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
      style="float: right;">
    </el-pagination>
  </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    // 是否显示分页器
    isPagination:{
      type:Boolean,
      default:false
    },
    // 控制是否需要多选框
    ischeck: {
      type: Boolean,
      default: true,
    },
    // 是否显示索引列
    isIndex: {
      type: Boolean,
      default: false,
    },
    // 表格的样式
    headerStyle: {
      type: Object,
      default: () => {
        return {
          border: true,
          "header-cell-style": {
            "background-color": "#d1cdcd",
            color: "#303133",
          },
          height: "",
        };
      },
    },
    // 表格列的样式
    columnStyle: {
      type: Object,
      default: () => {
        return {
          fixed: false,
          headerAlign: "left",
          align: "left",
          showOverflowTooltip: true,
        };
      },
    },
    // 表格列的数据
    column: {
      type: Array,
      default: () => {
        return [];
      },
    }, //表格展示的表头以及单元格字段
    columntag: {
      type: Array,
      default: () => {
        return [];
      },
      require: true,
    },
  },
  data() {
    return {
      currentPage4: 4
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleEdit(index, row, scope) {
      console.log(scope);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang='css' scoped>
</style>